<template>
    <div class="Word">
      <p class="word-p">订单管理</p>
      <div class="word-base">
        <el-select v-model="value" placeholder="按订单号查询">
          <el-option
            v-for="item in obj"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select>
        <div class="word-base1">
          <el-input
            placeholder="请输入内容"
            v-model="input"
            clearable>
          </el-input>

        </div>
        <div class="word-base2">
          <el-button plain @click="search">查询</el-button>
        </div>

      </div>
      <div style="margin-top: 20px;margin-left: 40px" >
        <template>
          <el-table
            :data="list"
            border
            @row-click="data">
            <el-table-column
              prop="orderNo"

              label="订单号">
            </el-table-column>
            <el-table-column
              prop="receiverName"
              label="收件人">
            </el-table-column>
            <el-table-column
              prop="statusDesc"
              label="订单状态">
            </el-table-column>
            <el-table-column
              prop="payment"
              label="订单总价"
              >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
                <p  style="color: #000" @click="look()">查看</p>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div style="margin-top: 20px;margin-left: 40px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pagesize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
  import {good,goodsize,goodSearch} from "../../api/index.js";

  export default {
        name: "Word",
      data(){
          return{
            input:"",
            list:[],
            pageNum:1,
            total:0,
            pagesize:10,
            value:"",
            home:{},
            obj:[{
              id:"id",
              label:"按订单号查询"
            }]
          }
      },
      methods:{
        async word() {
          const res = await good();
          console.log(res)
          this.list= res.data.list;
          this.total= res.data.total;

        },
        handleSizeChange(val) {
         this.pagesize=val
        },
        handleCurrentChange(val) {
          this.pageNum=val
          goodsize(this.pageNum).then(res=>{
            this.list=res.data.list
          })
        },
       search(){
          if(this.value){
              goodSearch(this.input).then((res)=>{
                this.list=res.data.list
              })
          }else {
            this.$message("请选择查询条件")
          }

       },
        look(){
          if(this.home.orderNo){
            console.log(this.home.orderNo);
            this.$router.push({
              path:"/look",
              query:{orderNo:this.home.orderNo}
            })
          }
        },
        data(row, event, column) {
          this.home=row
        },
      },
      mounted() {
          this.word();
        this.search();
      }
    }
</script>

<style lang="scss" scoped>
  @import "./../../Scss/index.scss";
.word-p{
  @include FontOnly(30px);
  @include Mlt(40px,40px)
}
   .word-base{
    @include Mlt(40px,40px);
     display: flex;
     .word-base1{
       width: 260px;
       margin-left: 40px;
     }
  }

</style>
